<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="支付订单" fixed :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
      background-color="#f7f7f7" rightText="筛选" @clickRight="onClickRight"></uni-nav-bar>
    <view class="topTag">
      <view class="tag" :class="{ activeTag: active == '' }" @click="changeTab('')">全部</view>
      <view class="tag" :class="{ activeTag: active == '0' }" @click="changeTab('0')">线上</view>
      <view class="tag" :class="{ activeTag: active == '1' }" @click="changeTab('1')">现金</view>
    </view>
    <scroll-view class="scroll-view_H" scroll-y :scroll-top="scrollTop" @scroll="scroll"
      @refresherrefresh="refresherrefreshFn" refresher-enabled="true" :show-scrollbar="false" @scrolltolower="lower"
      :refresher-triggered="triggered" enhanced style="height: calc(100% - var(--window-top) - 168rpx)">
      <view class="infoCard" v-for="(item, i) in orderList" :key="item.id + i"
        @click="$navTo('./payOrderDetail', { id: item.id, obj: JSON.stringify(item) })">
        <view class="tokenNum">
          <view class="count u-ellipsis goodsname">{{ item.bookingTime | parseTime('YYYY-MM-DD HH:mm:ss') }}</view>
          <view class="count">实付金额：{{ item.receiptsMoney }}元</view>
        </view>
        <view class="goodsBox">
          <view class="left">
            <view class="imgBox">
              <image :key="index" class="img" :src="items ? items : '/static/index/noneImg.png'"
                v-for="(items, index) in item.imgUrlList" mode="aspectFill"></image>
            </view>
            <view class="name" v-if="item.commodityList.length == 1">
              <view class="brand u-ellipsis">{{ item.commodityName }}</view>
              <view class="brand u-ellipsis">品牌：{{ item.commodityBrand ? item.commodityBrand : '无' }}</view>
            </view>
          </view>
          <view class="right">
            <uni-icons type="right" size="30"></uni-icons>
          </view>
        </view>
        <view class="tokenNum">
          <view class="count">共{{ item.commodityList.length }}件商品</view>
          <view class="count" v-if="item.orderMethods == '0'">支付方式：扫码</view>
          <view class="count" v-if="item.orderMethods == '1'">支付方式：现金</view>
        </view>
      </view>
      <uni-load-more :status="loading"></uni-load-more>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="orderList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <uni-popup ref="inputDialog" background-color="#fff" type="bottom" border-radius="0 0 30rpx 30rpx">
      <view style="padding: 30rpx 0;box-sizing: border-box;">
        <view style="padding: 0 20rpx;box-sizing: border-box;width: 100%;">
          <uni-forms ref="form" :model="formData" label-width="50">
            <uni-forms-item label="日期:">
              <uni-datetime-picker v-model="formData.time" type="daterange" @change="maskClick" start-placeholder="开始"
                end-placeholder="结束" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { reqOrderList } from '@/apis/member.js'
export default {
  name: "InventoryInfo",
  data() {
    return {
      active: '',
      orderList: [], // 供应链标品
      page: {
        pageNum: 1,
        pageSize: 15
      },
      old: {
        scrollTop: 0
      },
      formData: {
        time: [],
      },
      openTime: '',
      endTime: '',
      scrollTop: 0,
      triggered: false, // 是否触发下拉刷新
      loading: 'loading', // 是否触发上拉加载
    }
  },
  onLoad() {
  },
  onShow() {
    console.log('2222');
    this.page.pageNum = 1
    this.orderList = []
    this.loading = "loading";
    this.reqOrderList()
  },
  methods: {
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop
    },
    goTop() {
      this.scrollTop = this.old.scrollTop
      this.$nextTick(function () {
        this.scrollTop = 0
      });
    },
    refresherrefreshFn() {
      this.page.pageNum = 1
      this.triggered = true
      this.orderList = []
      this.loading = "loading";
      this.reqOrderList()

    },
    // 供应链 
    async reqOrderList() {
      const res = await reqOrderList({ ...this.page, orderMethods: this.active, openTime: this.openTime, endTime: this.endTime })
      if (res.code === 200) {
        this.orderList = [...this.orderList, ...res.data.list]
        this.nextPage = res.data.nextPage
        console.log('orderList:', this.orderList);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },
    lower() {
      if (this.loading == "noMore") {
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      this.reqOrderList()

    },
    changeTab(val) {
      this.page = {
        pageNum: 1,
        pageSize: 15
      }
      this.goTop()
      this.loading = 'loading'
      this.orderList = []
      this.active = val ? val : ''
      this.reqOrderList()

    },
    onClickRight() {
      this.$refs.inputDialog.open()
    },
    maskClick(e) {
      console.log('e', e, this.time);
      this.time = e
      this.openTime = this.formData.time.length ? this.time[0] : ''
      this.endTime = this.formData.time.length ? this.time[1] : ''
      this.page.pageNum = 1
      this.orderList = []
      this.loading = "loading";
      this.reqOrderList()
      this.$refs.inputDialog.close()
      this.goTop()
    }
  }
}
</script>
<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #f7f7f7;

}

view {
  box-sizing: border-box;
}

.topTag {
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #eee;

  .tag {
    width: 20%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    color: #999;

    &.activeTag {

      color: $uni-main-bgColor;
      font-weight: bold;
      border-bottom: 4rpx solid $uni-main-bgColor;
    }
  }
}

.goodsname {
  font-weight: 600;
}


.infoCard {
  background-color: #edf2fa;
  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  padding: 20rpx 30rpx;
  align-items: center;
  height: 280rpx;
  line-height: 50rpx;
  border: 1px solid #d3e3fd;


  .tokenNum {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      // padding-left: 10rpx;
    }

    .count:nth-child(2n) {
      // width: 48%;
      // padding-left: 10rpx;
      text-align: right;
    }
  }
}

.goodsBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 140rpx;
  padding: 10rpx 0;

  .left {
    width: 88%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    overflow: hidden;

    .img {
      box-sizing: border-box;
      border: 1px solid #fff;
      height: 120rpx;
      width: 120rpx;
      margin-right: 20rpx;
    }

    .name {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }

  .right {
    width: 10%;
  }
}
</style>
